<template>
  <a-layout>
    <a-layout>
      <a-row type="flex" class="topline">
        <a-icon type="left" style="font-size:20px;position" @click="goback" />
        <h3>{{ contractInfo.name + "的" + "xx合同类型" }}</h3>
        <a-icon type="add" />
      </a-row>
      <a-layout-content class="stepbox">
        <div class="contract" style="white-space:pre-wrap" v-html="htmlContent" />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { templateDetailReq } from "@/api/company/contract";
export default {
  data() {
    return {
      template: {},
      contractInfo: {},
      htmlContent: ""
    };
  },
  created() {
    this.getDetailBycategoryId(this.$route.query.id);
  },
  methods: {
    getDetailBycategoryId(id) {
      templateDetailReq(id).then(res => {
        let content = res.data.content;
        // if(content.indexOf("[\u4e00-\u9fa5]") > 0){
        const varibleKeys = content.match(/#[\u4e00-\u9fa5]+#/g);
        this.contractInfo = JSON.parse(localStorage.getItem("contractInfo"));
        const varibles = this.contractInfo.conVariableMap;
        varibleKeys.map(key => {
          const keyTemp = key.replace(/#/g, "");
          const idx = varibles.findIndex(item => {
            return item[keyTemp];
          });
          if (idx > -1) {
            content = content.replace(new RegExp(`#${this.tranHanzi(keyTemp)}#`, "g"), varibles[idx][keyTemp]["content"]);
          }
        });
        // }
        this.htmlContent = content;
      });
    },
    tranHanzi(str) {
      return escape(str)
        .toLocaleLowerCase()
        .replace(/%u/gi, "\\u");
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss">
.topline {
  padding: 0 24px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
  h3 {
    margin: 0;
    line-height: 60px;
  }
}
.contract {
  width: 630px;
  min-height: 772px;
  overflow: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
  margin: 24px auto;
  padding: 24px;
}
</style>
